<template>
	<div class="personnelList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-diaodu fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>调度中心</el-breadcrumb-item>
			<el-breadcrumb-item>任务列表</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="tableMaxBox">
				<div class="pl_10 pr_10" style="height: 40px;">
					<div class="fl">
						<!-- <span class="resetBtn mb_10" style="width:56px;margin-top:10px;" @click="downloadOrder">&nbsp;&nbsp;导出&nbsp;&nbsp;</span> -->
					</div>
					<!-- 顶部搜索区域 -->
					<div class="fr ml_10 mt_10 mb_10">
						<div class="search_box fl" style="border-top-right-radius: 0 0; border-bottom-right-radius: 0 0;">
							<div class="fl s_type">
								<el-input v-model="task_sn" placeholder="任务编号"></el-input>
							</div>
							<div class="fl s_type">
								<el-input v-model="demand_sn" placeholder="订单编号"></el-input>
							</div>
							<div class="fl s_type">
								<el-input v-model="staff_name" placeholder="接单人"></el-input>
							</div>
							<div class="fl s_type">
								<el-input v-model="mobile" placeholder="手机号"></el-input>
							</div>
							<div class="fl s_type">
								<el-autocomplete
									size="mini"
									class="w_250"
									v-model="shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</div>
							<div class="fl s_type">
								<el-select v-model="area_arr" placeholder="商圈" @change="changeBtndialogarea">
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="`${item.id}|${item.area_name}`"
									></el-option>
								</el-select>
							</div>
							<div class="fl s_type">
								<el-select v-model="type_arr" placeholder="任务类别" @change="changeBtndialogtype">
									<el-option
										v-for="item in TypeArr"
										:key="item.id"
										:label="item.label_name"
										:value="`${item.id}|${item.label_name}`"
									></el-option>
								</el-select>
							</div>
							<div class="fl s_type">
								<el-select v-model="status" placeholder="任务状态">
									<el-option label="待分配" value="10"></el-option>
									<el-option label="已分配" value="20"></el-option>
									<el-option label="已确认" value="30"></el-option>
									<el-option label="已签到" value="40"></el-option>
									<el-option label="已完成" value="50"></el-option>
									<el-option label="已撤回" value="60"></el-option>
									<el-option label="已取消" value="70"></el-option>
								</el-select>
							</div>
							<!-- <div class="fl s_type">
								<el-select v-model="time_type" placeholder="时间类型">
									<el-option label="创建时间" value="1"></el-option>
									<el-option label="开始时间" value="2"></el-option>
									<el-option label="签到时间" value="3"></el-option>
									<el-option label="确认时间" value="4"></el-option>
									<el-option label="完成时间" value="5"></el-option>
								</el-select>
							</div> -->
						</div>
						<div class="search_box fl" style="width: 596px; border: 0;">
							<div class="fl">
								<el-form :model="ruleForm" ref="ruleForm" label-width="100" class="demo-ruleForm fl">
									<el-form-item required>
										<el-col :span="11">
											<el-form-item prop="date1">
												<el-date-picker
													v-model="ruleForm.date1"
													type="datetime"
													value-format="yyyy-MM-dd HH:mm:ss"
													placeholder="开始时间"
												>
												</el-date-picker>
											</el-form-item>
										</el-col>
										<el-col class="line" :span="2">~</el-col>
										<el-col :span="11">
											<el-form-item prop="date2">
												<el-date-picker
													v-model="ruleForm.date2"
													type="datetime"
													value-format="yyyy-MM-dd HH:mm:ss"
													placeholder="结束时间"
												>
												</el-date-picker>
											</el-form-item>
										</el-col>
									</el-form-item>
								</el-form>
							</div>
							<div class="fl s_submit_set pointer" @click="resetBtn">重置</div>
							<div class="fl s_submit pointer" @click="shearchBtn">搜索</div>
						</div>
					</div>
				</div>
				<template>
					<!-- 表格部分 -->
					<el-table :data="demandList" stripe>
						<el-table-column prop="task_sn" label="任务编号" width="150px">
							<template slot-scope="{ row, $index }">
								<span class="pointer u text-primary" @click="goToMore(row)">{{ row.task_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="total" label="接单人" width="150px">
							<template slot-scope="{ row, $index }">
								<span>{{ row.staff_name }} {{ row.mobile }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="shop_name" label="店铺名称" width="200px">
							<template slot-scope="{ row, $index }">
								<span>{{ row.shop_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="sn" label="订单编号" width="150px">
							<template slot-scope="{ row, $index }">
								<span class="pointer u text-primary" @click="goToMore(row)">{{ row.demand_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="area_name" label="商圈"></el-table-column>
						<el-table-column prop="label_name" label="任务名称" width="140px">
							<template slot-scope="{ row, $index }">
								<span class="pointer u">{{ row.job_name }} {{ row.hour_expect }}h</span>
							</template>
						</el-table-column>
						<el-table-column prop="period" label="用工天数D"></el-table-column>
						<!-- ？？？ -->
						<el-table-column prop="task_description" width="220px" label="任务备注"></el-table-column>
						<el-table-column prop="hour_actual" label="实际时长"></el-table-column>
						<el-table-column prop="status" label="状态" width="120px">
							<template slot-scope="{ row, $index }">
								<span class="text-success" v-if="row.status == '10'">待分配</span>
								<span class="text-primary" v-if="row.status == '20'">已分配</span>
								<span class="text-gray" v-if="row.status == '30'">已确定</span>
								<span class="text-warning" v-if="row.status == '40'">已签到</span>
								<span class="text-warning" v-if="row.status == '50'">已完成</span>
								<span class="text-default" v-if="row.status == '60'">已撤回</span>
								<span class="text-danger" v-if="row.status == '70'">已取消</span>
							</template>
						</el-table-column>
						<el-table-column prop="start_date" label="任务开始/结束时间" width="200px">
							<template slot-scope="{ row, $index }">
								<span>{{ row.start_date }}/{{ row.start_time }}-{{ row.end_time }}</span>
							</template></el-table-column
						>
						<el-table-column prop="add_time" label="创建时间" width="150px"></el-table-column>
						<!-- ??? -->
						<el-table-column prop="accept_time" label="确定时间" width="150px"></el-table-column>
						<el-table-column prop="checkin_time" label="签到时间" width="150px"></el-table-column>
						<el-table-column prop="finish_time" label="完成时间" width="150px"></el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
export default {
	name: 'ShopList',
	data() {
		return {
			id: '',
			dataMes: '',
			ids: '',
			ids_name: '',
			agreement: '',
			index: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			//搜索对应值
			task_sn: '', //任务编号
			demand_sn: '', //订单编号
			staff_name: '', //接单人
			mobile: '', //手机号
			area_arr: '', //商圈信息
			area_id: '',
			area_name: '',
			type_arr: '', //需求信息
			label_id: '',
			label_name: '',
			shop_id: '', //店铺id
			shop_name: '', //店铺名
			status: '', //账号状态： 1:正常  2:禁用
			time_type: '2', //时间类型选择
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},

			TypeArr: '',
			demandList: [], //任务列表
			//向分页组件传值
			total: 0,
			pageNum: '',
			pageSizeNow: '',
			// 审核状态
			text: '',
			merchantsList: [], //商户列表
			areaList: [], //区域列表
			shopList: [] //店铺列表
		}
	},
	created() {
		if (this.$route.query.name) {
			this.staff_name = this.$route.query.name //接单人name
		}
		if (!sessionStorage.getItem('manageInfo')) {
			// 判断是否登录
			window.location = 'login.html'
			return
		}
		//时间的默认选中
		var d = this.date(0)
		this.ruleForm.date1 = d + ' 00:00:00'
		var e = this.date(2)
		this.ruleForm.date2 = e + ' 00:00:00'
	},
	mounted() {
		this.getMerchants() //商户列表
		this.listUser() //店铺列表
		this.alljob_type()
		this.listArea() //区域列表
	},
	methods: {
		date(e) {
			return this.$moment().add('days', e).format('YYYY-MM-DD')
		},
		//获取商户列表
		getMerchants() {
			let fn = new FormData()
			this.$http.post(this.url + '/business/list', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						if (res.data.data.list != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.merchantsList = res.data.data.list
						} else {
							this.merchantsList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		listUser() {
			//获取商铺列表
			// let fn = new FormData()
			// this.$http.post(this.url + '/shop/list', fn).then(
			// 	res => {
			// 		if (res.data.msg == '查询成功' || res.data.code == '200') {
			// 			if (res.data.data != null) {
			// 				res.data.data.list.forEach(item => {
			// 					item.value = item.name
			// 				})
			// 				this.shopList = res.data.data.list
			// 				this.total = res.data.data.count
			// 			} else {
			// 				this.shopList = []
			// 				this.total = 0
			// 			}
			// 		} else if (res.data.code == '8886') {
			// 			//code   8886  登录过期
			// 			sessionStorage.clear()
			// 			this.$alert('登录已过期，请重新登录 !', '提示', {
			// 				confirmButtonText: '确定',
			// 				callback: action => {
			// 					window.location = 'login.html'
			// 				}
			// 			})
			// 			return
			// 		} else {
			// 			this.$message.error(res.data.msg)
			// 			return
			// 		}
			// 	},
			// 	res => {
			// 		this.$message.error('网络错误！')
			// 		return
			// 	}
			// )
			let fn = new FormData()
			fn.append('sign_status', 30) //已合作的店铺
			fn.append('status', 1) //启用的店铺
			// fn.append("search_list", 1); //不进行分页
			this.$http.post(this.url + '/shop/getListForSearch', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.shopList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.shopList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		listShop() {
			//获取任务列表
			let fn = new FormData()
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数
			fn.append('task_sn', this.task_sn)
			fn.append('demand_sn', this.demand_sn)
			fn.append('staff_name', this.staff_name)
			fn.append('mobile', this.mobile)
			fn.append('shop_id', this.shop_id)
			fn.append('area_id', this.area_id)
			// fn.append('area_id', 53);
			// ???此处area_id
			fn.append('label_id', this.label_id)
			fn.append('status', this.status)
			fn.append('time_type', this.time_type)
			fn.append('start_time', this.ruleForm.date1)
			fn.append('end_time', this.ruleForm.date2)

			this.$http.post(this.url + '/task/list', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功！' || res.data.code == '200') {
						if (res.data.data != null) {
							this.demandList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.demandList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listShop()
		},

		resetBtn() {
			//重置
			this.resetData() //重置请求数据
			this.pageNum = 1
			this.listShop()
		},

		resetData() {
			//重置请求数据
			this.pageNum = 1
			this.task_sn = ''
			this.demand_sn = ''
			this.staff_name = ''
			this.mobile = ''
			this.type_arr = ''
			this.label_id = ''
			this.label_name = ''
			this.area_arr = ''
			this.area_id = ''
			this.area_name = ''
			this.business_id = ''
			this.business_name = ''
			this.shop_id = ''
			this.shop_name = ''
			this.status = ''
			this.time_type = 2
			// this.ruleForm.date1 = '2020-09-07 00:00:00';
			// this.ruleForm.date2 = '2020-09-09 00:00:00';
			//时间的默认选中
			var d = this.date(0)
			this.ruleForm.date1 = d + ' 00:00:00'
			var e = this.date(2)
			this.ruleForm.date2 = e + ' 00:00:00'
		},

		//跳转任务详情
		goToMore(row) {
			this.$router.push({
				path: '/roleMain',
				query: {
					rl_id: row.demand_id,
					rl_sn: row.demand_sn,
					task_id: row.id,
					start_date: row.start_date
				}
			})
		},

		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			// console.log(item);
			this.shop_id = item.id
		},

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listShop()
		},

		//导出
		downloadOrder() {
			let obj = {
				shop_id: this.shop_id,
				area_id: this.area_id,
				status: this.status,
				sn: this.sn,
				job_type: this.label_id,
				start_time: this.ruleForm.date1,
				end_time: this.ruleForm.date2
			}
			let param = $.param(obj)
			window.location.href = this.url + '/demand/export?' + param
		},
		changeBtndialogtype() {
			let [id, name] = this.type_arr.split('|') // es6 数组解构赋值
			this.label_id = id
			this.label_name = name
		},
		//标签接口
		alljob_type() {
			let fn = new FormData()
			fn.append('label_type', 'job_type')
			this.$http.post(this.url + '/label/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.TypeArr = res.data.data
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		changeBtndialogarea() {
			let [id, name] = this.area_arr.split('|') // es6 数组解构赋值
			this.area_id = id.toString()
			this.area_name = name.toString()
		},
		//获取商圈列表
		listArea() {
			let fn = new FormData()
			this.$http.post(this.url + '/area/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.area_name
							})
							this.areaList = res.data.data.list
						} else {
							this.areaList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		}
	},
	filters: {
		ReversalTime: function (value) {
			value = value % 24
			return common.getReversalTime(value)
		}
	}
}
</script>

<style scoped>
/* .search_box{width:790px;} */
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
.main_user {
	background: var(--zfy-red);
	color: #fff;
	text-decoration: none;
	padding: 2px 4px;
	border-radius: 4px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}
</style>



// WEBPACK FOOTER //
// src/components/staff/PersonnelTaskList.vue